<template>
  <div>
    <nav>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
<!--        <el-form-item label="业主">-->
<!--          <el-input v-model="formInline.ownerId" placeholder="业主"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="楼号">
          <el-select v-model="formInline.buildingId" placeholder="楼号"  @change="handleUnitNumberOptions">
            <el-option  v-for="item in buildingNumberOptions"
                     :key="item.buildingName"
                     :label="item.buildingName"
                     :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元号">
          <el-select v-model="formInline.unitId" placeholder="单元号">
            <el-option  v-for="item in unitNumberOptions"
                        :key="item.unitName"
                        :label="item.unitName"
                        :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.houseStateId" placeholder="状态">
            <el-option  v-for="item in houseStateOptions"
                        :key="item.state"
                        :label="item.state"
                        :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </nav>



    <el-table
        :data="house"
        style="width: 100%">


      <el-table-column
          label="楼号"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.unit.building.buildingName }}</el-tag>
          </div>

        </template>
      </el-table-column>

      <el-table-column
          label="房屋面积"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.houseArea }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column
          label="所属单元"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.unit.unitName }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column
          label="门牌号"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.houseNumber }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column
          label="楼层数"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.floor }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.houseState.state }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column
          label="物业费收取标准"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.propertyFees.fees }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column
          label="业主"
          width="180">
        <template slot-scope="scope">

          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.owner.name }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--                <el-button-->
          <!--                        size="mini"-->
          <!--                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <router-link :to="{name:'房屋添加',query:{id:scope.row.id}}">  <el-button size="mini">编辑</el-button></router-link>
          <el-button
              size="mini"
              type="danger"
              v-if="scope.row.state"
              @click="handleDelete(scope.row.id, scope.row)">禁用
          </el-button>
          <el-button
              size="mini"
              type="success"
              v-else
              @click="handleDelete(scope.row.id, scope.row)">启用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

  </div>

</template>
<script>
import {toArray} from "core-js/internals/async-iterator-iteration";

export default {
  data() {
    return {
      house:[],
      total:'',
      pageSize:'',
      selectOwnerName:'',
      selectBuildingNumber:'',
      buildingNumberOptions:[],
      selectUnitNumber:'',
      unitNumberOptions:[],
      selectHouseState:'',
      houseStateOptions:[{}],
      formInline: {
        unitId:'',
        buildingId:'',

        houseStateId:'',
      },
    }
  },
  created() {
    this. handleHouseStateOptions();
    this.handleBuildingNumberOptions();
    this.handleHouse();

  },
  methods: {
    //获取楼号列表-去重
    handleBuildingNumberOptions(){
      this.$axios.get("manage/findBuildingNumberOptions")
          .then(res=>{
                if (res.data && res.data.findBuildingNumberOptions) {
                  this.buildingNumberOptions =res.data.findBuildingNumberOptions
                }

      })
    },
    //获取单元列表-去重
    handleUnitNumberOptions(){
        this.unitNumberOptions={}
      this.$axios.get("manage/unit/findUnitNumberOptions",{params:{id:this.formInline.buildingId}})
          .then(res=>{
            if (res.data && res.data.findUnitNumberOptions) {
              this.unitNumberOptions =res.data.findUnitNumberOptions
            }

          })
    },
    //获取状态列表
    handleHouseStateOptions(){
      this.$axios.get("manage/findHouseStateOptions")
          .then(res=>{
            if (res.data && res.data.findHouseStateOptions) {
              this.houseStateOptions =res.data.findHouseStateOptions
            }

          })
    },


    onSubmit() {
      // this.handleHouse();
      // console.log('submit!');
      // console.log(this.formInline)
        this.house={}
      this.$axios.post("manage/pageHouseSearch",this.formInline,{params:{pageNum:"1",pageSize:"5"}})
          .then(res => {
              console.log("========查询之后")
              console.log(res)
            this.house=res.data.housePage.records
            this.total=res.data.housePage.total
            this.pageSize=res.data.housePage.size
          })
    },
    handleHouse(){
      this.$axios.post("manage/pageHouseList",{data:{house:this.formInline}},{params: {pageNum:"1",pageSize:"5"}})
          .then(res=>{

            this.house=res.data.housePage.records
            this.total=res.data.housePage.total
            this.pageSize=res.data.housePage.size

          })

    },//编辑
    handleEdit(index, row) {
      console.log(index, row);
    },//删除
    handleDelete(index, row) {
      // console.log("****")
      // console.log(row)
      // this.$axios.post("manage/deleteAdmin",row).then(res=>{
      //   alert(res.data.msg);
      //   this.handleAdmin();
      // })
      // console.log(index, row);
    },
    handleCurrentChange(val) {
      this.$axios.post("manage/pageHouseList",{data:{house:this.formInline}},{params: {pageNum:val,pageSize:this.pageSize}})
          .then(res=>{
            this.house=res.data.housePage.records
          })
    }

  }
}
</script>


<style scoped>

</style>